<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>接口/文档</title>

		<meta name="description" content="User login page" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<link rel="shortcut icon" href="${req.contextPath}/images/leaf.ico">
		<link rel="stylesheet" href="http://cdn.staticfile.org/todc-bootstrap/3.3.5-3.3.5/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${req.contextPath}/css/api/api.css" />
		<link rel='stylesheet' href='${req.contextPath}/css/main.css' type='text/css'/>
		<style type="text/css">
			#panel>ul>li>i{
				position: absolute;
			    display: block;
			    left: 2px;
			    top: 7px;
			    width: 16px;
			    height: 16px;
			    background:url("images/arrow.png") no-repeat;
			    transition: .2s;
			}
			#panel>ul>li.active>i{
				transform: rotate(90deg);
				transition: .2s;
			}
			#panel>ul>li>ul{
				display: none;
			}
			#panel ul li ul li{
				#70ABD5
			}
			
			#verSele{
				float: right;
			}
			th {
			    border-top: 1px solid #BBB;
			    background-color: #F7F7F7;
			}
			td, th {
			    padding: 5px 10px;
			    border: 1px solid #DDD;
			}
		</style>
	</head>
<body>
<!--head begin -->
<div class="header">
	<div class="title">
           	接口/文档
	</div>
</div>
<!--/head end-->

<div class="main">
	<div style="background-color: #F4F5F9;height:40px;width:100%;color:#000;text-align: center;line-height: 40px;">
		<span style="">项目选择</span>
		<select id="project">
		<#list rootList as root>
			<#if (root.parent_id!"")=="">
				<option value="${root.id!}" <#if root.id == bean.id > selected="selected"</#if> >${root.name!}</option>
			</#if>
		</#list>
		</select>
	</div>
	<div class="inner">
		<!-- panel -->
		<div id="panel">			
<!-- 左边panel开始 -->	
			<ul class="nav nav-list link" >
				<li><a href="javascript:void(0);" title="http调试工具" data-url="${req.contextPath}/apidoc/doc/debug.do">http调试工具</a></li>
			</ul>
			<!-- 项目目录 -->
			<ul class="nav nav-list" style="margin-top:5px;">
			<#list beanList as item >
			<#if item.node = 1 && item.parent_id ==bean.id >
			  	<li>
			  		<a href="javascript:void(0);" title="${item.name!}" data-id='${item.id!}'>
			  			${item.name!}<i class="glyphicon glyphicon-chevron-left"></i>
			  		</a>
					<ul class="doc">
						<#if item.docList??>
						<#list item.docList as doc >
						<li>
							<a href="javascript:void(0);" title="${doc.name!}" data-id='${doc.id!}'>${doc.name!}<span class="badge">${doc.seq}</span></a>
						</li>
						</#list>
						</#if>
					</ul>
			  	</li>
			<#elseif item.parent_id ==bean.id >
				<li>
				  	<a href="javascript:void(0);" title="${item.name!}">
				  		${item.name!}<i class="glyphicon glyphicon-chevron-left"></i>
				  	</a>
					<ul class="child">
					<#list beanList as item2 >
					<#if item2.node == 1 && item2.parent_id ==item.id > 
					  	<li>
					  		<a href="javascript:void(0);" title="${item2.name!}" data-id='${item2.id!}' >
					  			${item2.name!}<i class="glyphicon glyphicon-chevron-left"></i>
					  		</a>
						  	<ul class="doc">
								<#if item2.docList??>
								<#list item2.docList as doc >
								<li>
									<a href="javascript:void(0);" title="${doc.name!}" data-id='${doc.id!}'>${doc.name!}<span class="badge">${doc.seq}</span></a>
								</li>
								</#list>
								</#if>
							</ul>
					  	</li>
					<#elseif item2.parent_id ==item.id > 
					  	<li>
						  	<a href="javascript:void(0);" title="${item2.name!}">
						  		${item2.name!}<i class="glyphicon glyphicon-chevron-left"></i>
						  	</a>
							<ul class="child">
							<#list beanList as item3 >
							<#if item3.node == 1 && item3.parent_id ==item2.id> 
							  	<li>
							  		<a href="javascript:void(0);" title="${item3.name!}" data-id='${item3.id!}'>
							  			${item3.name!}<i class="glyphicon glyphicon-chevron-left"></i>
							  		</a>
								  	<ul class="doc">
										<#if item3.docList??>
										<#list item3.docList as doc >
										<li>
											<a href="javascript:void(0);" title="${doc.name!}" data-id='${doc.id!}'>${doc.name!}<span class="badge">${doc.seq}</span></a>
										</li>
										</#list>
										</#if>
									</ul>
							  	</li>
							<#elseif item3.parent_id ==item2.id > 
							  	<li>
								  	<a href="javascript:void(0);" title="${item3.name!}">
								  		${item3.name!}<i class="glyphicon glyphicon-chevron-left"></i>
								  	</a>
									<ul class="child">
									<#list beanList as item4 >
									<#if item4.node == 1 && item4.parent_id ==item3.id> 
										<li>
											<a href="javascript:void(0);" title="${item4.name!}" data-id='${item4.id!}'>
												${item4.name!}<i class="glyphicon glyphicon-chevron-left"></i>
											</a>
											<ul class="doc">
												<#if item4.docList??>
												<#list item4.docList as doc >
												<li>
													<a href="javascript:void(0);" title="${doc.name!}" data-id='${doc.id!}'>${doc.name!}<span class="badge">${doc.seq}</span></a>
												</li>
												</#list>
												</#if>
											</ul>
										</li>
									<#elseif item4.parent_id ==item3.id >
										<li>
											<a href="javascript:void(0);" title="${item4.name!}">
												${item4.name!}<i class="glyphicon glyphicon-chevron-left"></i>
											</a>
										</li>
									</#if>
									</#list>
									</ul> 
								</li>
							</#if>
							</#list>
							</ul>
						</li>
					</#if>
					</#list>
					</ul> 
				</li>
			</#if>
			</#list>
			</ul>
<!-- /左边panel结束 -->
		</div>
<!-- content -->
		<div id="content">
			<div class="title">
				http调试工具
			</div>
			<div id="bodyContent">
				<iframe src="${req.contextPath}/apidoc/doc/debug.do" allowTransparency="true" scrolling="auto" width="100%" height="730px" frameBorder="0"></iframe>
			</div>
		</div>
<!-- /content -->
	</div>
</div>
		
<!-- footer begin  -->
<div class="foot" id="footer">
	<ul class="links ft" id="footer-places">
			<li class="links_item no_extra" id="footer-about"><a target="_blank" href="${req.contextPath}/index.do">接口文档</a></li>
	</ul>
	<p class="copyright">Copyright&nbsp;&copy; 2017- 行致远网络有限公司. All Rights Reserved.</p>
</div>
<!-- /footer end -->

<script type="text/javascript" src='${req.contextPath}/plugin/jquery/jquery-2.1.4.min.js'></script>
<script type="text/javascript" src='${req.contextPath}/js/common/common.js'></script>
<script type="text/javascript">
var docVerMap=new Object;//以版本号id为属性名，版本内容html为属性值，保存当前活动文档版本集合
$(function() {
	//项目选择事件
	$("#project").change(function(){
		var id = $(this).val();
		window.location.href="${req.contextPath}/index.do?rootId="+id;
	});
	
	//连接页面
	$("#panel ul.link>li>a").click(function(){
		var url =$(this).data("url");
		var title=$(this).attr("title");
		var frameHtml='<iframe src="'+url +'" allowTransparency="true" scrolling="auto" width="100%" class="contentFrame" height="730px" frameBorder="0"></iframe>'
		$("#content .title").html(title);
		$("#content #bodyContent").html(frameHtml);
	});
	
	//目录点击事件
	$("#panel ul>li>a").click(function(){
		var liObj=$(this).parent();//获取点击li
		var iObj = $(liObj).children("a").children("i").first();//获取 i
		var child_ulObj = $(liObj).children("ul");//查询当前li下级ul
		if($(liObj).hasClass("expand")){
			//关闭下级ul  向上滑动隐藏 
			$(child_ulObj).slideUp("fast","swing",function(){
				if($(iObj).hasClass("glyphicon-chevron-down")){
					$(iObj).removeClass("glyphicon-chevron-down");
					$(iObj).addClass("glyphicon-chevron-left");
				}
				$(liObj).removeClass("expand");
			});
		}else{
			//展开下级ul  向下滑动显示
			$(child_ulObj).slideDown("fast","swing",function(){
				if($(iObj).hasClass("glyphicon-chevron-left")){
					$(iObj).removeClass("glyphicon-chevron-left");
					$(iObj).addClass("glyphicon-chevron-down");
				}
				$(liObj).addClass("expand");
			});
		}
	});
	
	//接口文档跳转
	$("#panel ul.doc>li>a").click(function(){
		var current=$(this);
		//删除其他文档活动标示
		$("#panel ul.doc>li>a").removeClass("act");
		$(current).addClass("act");//为当前文档添加活动标示
		var doc_id=current.data("id");
		
		//在api稳定时可以改为在打开该页面时静默加载当前根项目所包含的文档数据
		//开发期间api接口更新平凡,最好每次都请求后台拿最新接口资料
		$.get("${req.contextPath}/apidoc/doc/findByDocId.do",{"id":doc_id}, function(data){
		  	if(data.errcode==0){
			var docVerList = data.result.docVerList;
			
			var strHtml="<select id='verSele'>";
			var docVer;
			for(var i=0;i<docVerList.length;i++){
			 	docVerMap[docVerList[i].id]=docVerList[i].content_html;
				if(i==docVerList.length-1){
					docVer=docVerList[i];
					strHtml+="<option value='"+docVerList[i].id+"' selected='true' >"+docVerList[i].version+"</option>";
				}else{
					strHtml+="<option value='"+docVerList[i].id+"'>"+docVerList[i].version+"</option>";
				}
			}
			strHtml+="</select><span style='float:right' >版本号：</span>";
			$("#content .title").html($(current).attr("title")+strHtml);
			$("#content #bodyContent").html(docVer.content_html);
			//委派版本下拉事件
			$("#content").delegate("#verSele", "change",function(){
				var id=$(this).val();
				$("#content #bodyContent").html(docVerMap[id]);
			});
		  }else{
			  alert("数据请求异常!");
		  }
		},"json");
	});
});
</script>
</body>
</html>